<script setup lang="ts">
import {computed} from "vue";
import {useUserStore} from "@/stores/userStore";
import {Edit, Select, ShoppingCart} from "@element-plus/icons-vue";
import Cart from "@/pages/CartModule/Cart.vue";
import OrderInvoice from "@/pages/OrdersInvoicesModule/OrderInvoice.vue";
import OrderSubmit from "@/pages/OrdersInvoicesModule/OrderSubmit.vue";
import PaymentSuccess from "@/pages/OrdersInvoicesModule/PaymentSuccess.vue";
import {authUtilStore} from "@/utils/authStore";
import {useRouter} from "vue-router";

const isLogin = computed(() => useUserStore().isLogin);
const userInfo = useUserStore().userInfo;
const authStore = authUtilStore();
//退出登录
const logout = () => {
  useUserStore().logout();
};
// 处理账户链接点击事件
const handleAccountClick = () => {
  if (userInfo && userInfo.id) {
    window.location.href = `/myAccount/${userInfo.id}`
  } else {
    alert('请先登录！')
  }
}
// 处理订单链接点击事件
const handleOrderClick = () => {
  if (userInfo && userInfo.id) {
    window.location.href = `/myOrder/${userInfo.id}`
  } else {
    alert('请先登录！')
  }
}
const router = useRouter();
// 切换登录/注册状态
const handleAuthSwitch = (mode: 'login' | 'register') => {
  // 1. 切换登录/注册状态
  if (mode === 'login') {
    authStore.switchToLogin();
  } else {
    authStore.switchToRegister();
  }

  // 2. 导航到目标路由（无刷新）
  router.replace('/login-register');
};
</script>

<template>
  <div class="container">
    <!-- Header -->
    <div class="header">
      <h1 class="logo">嗨购网上商城</h1>
      <div style="width: 40%;height: 100%">
        <ul class="shortcut">
          <li><a href="#" @click.prevent="handleAccountClick">我的账户</a></li>
          <li><a href="#" @click.prevent="handleOrderClick">我的订单</a></li>
          <li><a href="">使用帮助</a></li>
        </ul>
        <p class="logoInfo">
        <span style="display: flex;align-items: center;" v-if="isLogin">
          <el-avatar size="15" :src="userInfo.avatar"
                     style="margin-right: 10px;border: 1px solid #ccc;"/>
          <button @click="logout">退出</button>
        </span>
          <span class="login-register-links" v-if="!isLogin">
          [<a href="#" @click.prevent="handleAuthSwitch('login')">登录</a>
           <a href="#" @click.prevent="handleAuthSwitch('register')">注册</a>]
          </span>
        </p>
      </div>
    </div>
    <!-- Content -->
    <div class="content">
      <!-- top -->
      <div class="content-top">
        <a href="/" class="title">首页</a>
        <div>|</div>
        <div class="link">
          <el-icon :size="0" class="icon" v-if="authStore.active === 0">
            <ShoppingCart/>
          </el-icon>
          {{ authStore.active === 0 ? "我的购物车" : authStore.active === 1 ? "订单详情" : "支付页面" }}
        </div>
        <div>
          <el-steps
              class="steps"
              :space="200"
              :active="authStore.active"
              finish-status="success"
              simple>
            <el-step title="查看购物车" :icon="ShoppingCart"/>
            <el-step title="核对订单信息" :icon="Edit"/>
            <el-step title="成功提交订单" :icon="Select"/>
          </el-steps>
        </div>
      </div>
      <!-- main -->
      <Cart v-if="authStore.active=== 0"/>
      <OrderInvoice v-if="authStore.active === 1"/>
      <OrderSubmit v-if="authStore.active=== 2"/>
      <PaymentSuccess v-if="authStore.active===3"/>
    </div>
  </div>
</template>

<style scoped>
.steps {
  margin-left: 260px;
  width: 600px;
  background: bisque;
}

.link {
  width: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.icon {
  font-size: 40px;
  margin: 0 10px;
}

.title {
  color: white;
  text-decoration: none;
  margin-left: 50px;
  margin-right: 20px;
}

.title:hover {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

.content-top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  font-size: 23px;
  background-color: #e89777;
  padding: 5px 0;
}

.content {
  width: 100%;
}

.container {
  width: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.logo {
  padding-left: 30px;
  width: 60%;
  color: orange;
  line-height: 60px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 5px;
}

.shortcut {
  display: flex;
  list-style: none;
  justify-content: right;
  margin-right: 20px;
}

.shortcut li {
  margin-left: 15px;
}

.shortcut a {
  text-decoration: none;
  color: #666;
}

.logoInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  padding-right: 20px;
}

.login-register-links {
  margin-left: 15px;
}

.login-register-links a {
  color: #e17d58;
  text-decoration: none;
  margin: 0 5px;
}
</style>